<template>
	<view>
		<!-- 单个商品信息 -->
		<view class="goodsItem">
			<!-- 商品左侧图片 -->
			<view class="goodsLeft">
				<!-- 商品勾选框插槽 -->
				<slot name="select"></slot>
				<!-- 商品小图 -->
				<img :src="goodsItem.goods_small_logo || defaultPic" :class="smallSize ? 'smallPic' : ''" />
			</view>
			<!-- 商品右侧内容 -->
			<view class="goodsRight">
				<!-- 商品标题 -->
				<view class="goodsTitle" :class="smallSize ? 'smallTitle' : ''"> {{ goodsItem.goods_name }} </view>
				<!-- 商品详细，后续需定义商品添加按钮等 -->
				<view class="goodsInfo">
					<!-- 商品价格 -->
					<view class="goodsPrice"> <text>￥</text> {{ goodsPrice }} </view>
					<!-- 数字输入框插槽 -->
					<slot name="numBox"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'my-goods',
	data() {
		return {
			defaultPic:
				'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
		}
	},
	props: {
		goodsItem: {
			type: Object,
			default: {},
			require: true
		},
		// 应用更小的商品图片和商品标题
		smallSize: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		// 让商品价格显示小数点后两位
		goodsPrice() {
			return Number(this.goodsItem.goods_price).toFixed(2)
		}
	}
}
</script>

<style lang="scss">
// 商品信息
.goodsItem {
	display: flex;
	padding: 5px 5px;
	// 商品左侧
	.goodsLeft {
		margin-right: 10px;
		display: flex;
		align-items: center;

		img {
			width: 130px;
			height: 130px;
			vertical-align: middle;
			border-radius: 8px;
		}
	}
	// 商品右侧
	.goodsRight {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		// 商品标题
		.goodsTitle {
			font-size: 13px;
		}
		// 商品info
		.goodsInfo {
			padding-bottom: 5px;
			display: flex;
			justify-content: space-between;
			.goodsPrice {
				color: #c00000;
				font-size: 18px;
				text {
					font-size: 14px;
				}
			}
		}
	}
}
// 适用购物车详情页的小尺寸
.smallPic {
	width: 100px !important;
	height: 100px !important;
}
.smallTitle {
	font-size: 12px !important;
}
</style>
